<template>
  <div class="line-view" :id="componentId"></div>
</template>

<script>
const echarts = require("echarts");
export default {
  mounted() {
    const myChart = echarts.init(document.getElementById(this.componentId));
    const option = {
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: "line",
        },
      ],
    };

    myChart.setOption(option);
  },
  computed: {
    componentId() {
      return +new Date();
    },
  },
};
</script>

<style lang="less" scoped>
.line-view {
  height: 300px;
  width: 100%;
}
</style>